<template>
	<view class="body">
		<view>
			<filter @reload='reload' />
		</view>
		<template v-if="token">
			<view style="display:flex" v-if="userLoading">
				<view v-for="(item,index) in [1,2,3,4,5]" :key="index" class="access ">
					<view style="width: 100rpx;height: 100rpx;border-radius:100% ;" class="Skeleton">

					</view>
					<view style="width: 100rpx;height: 20rpx;" class="Skeleton">
					</view>
				</view>
			</view>
			<view style="display:flex;overflow: auto;" v-else>
				<view v-for="(item,index) in userList" :key="index" class="access"
					@click="reload({customer:{id:item.id}})">
					<u-avatar :src="item.avatar" size='100rpx'></u-avatar>
					<view style="margin-top: 20rpx;height: 40rpx;">
						{{item.nick_name}}
					</view>
				</view>
			</view>
		</template>
		<view style="flex: 1;">
			<z-paging @scroll='scroll' :refresher-enabled='refresher_enabled' ref="paging" style="height: 100%;"
				:fixed="false" v-model="data" @query="query" :default-page-no="1" :default-page-size="10">
				<active @refresher_enabled_change='refresher_enabled_change' @loadingChange='loading=!loading'
					@reload='reload' :playIndex='playIndex' ref='active' :loading='loading' :active='data' />
			</z-paging>
		</view>
	</view>
</template>

<script>
	import filter from '@/components/filter'
	import active from './components/active'
	export default {
		components: {
			active,
			filter
		},
		data() {
			return {
				playIndex: 0,
				loading: true,
				data: [],
				refresher_enabled: true,
				customer_id: null,
				process_id: null,
				token: uni.getStorageSync('token'),
				userList: [],
				userLoading: true
			}
		},
		mounted() {
			if (this.token) {
				this.$api.My.Followings({
					page: 1,
					size: 100
				}).then(res => {
					this.userList = res.data.followings.data
					uni.hideLoading()
					this.userLoading = false
				}).catch(err => {
					uni.$u.toast(err.message)
					uni.hideLoading()
				})
			}
		},
		methods: {
			scroll(e) {
				const top = e.detail.scrollTop
				let index = 0
				let domTop0 = 0
				const query = uni.createSelectorQuery().in(this.$refs.active);
				query.selectAll('.activeBox').boundingClientRect(data => {
					data.forEach((rect, domIndex) => {
						let domTop = rect.top + top
						if (index == 0) {
							domTop0 = domTop
						}
						if (top > (domTop - domTop0)) {
							index = domIndex
						}
						if (domIndex == data.length - 1) {
							this.playIndex = index

						}
					});
				}).exec();
			},
			refresher_enabled_change(e) {
				this.refresher_enabled = e
			},
			reload(e) {
				if (e) {
					this.customer_id = e.customer?.id
					this.process_id = e.process?.id
				}
				this.$refs.paging.reload()
			},
			query(page, size) {
				let obj = {
					page,
					size,
					process_id: this.process_id,
					user_id: this.customer_id
				}
				uni.showLoading({
					title: ' 加载中...'
				})
				this.$api.Active.AllList(obj).then(res => {
					this.$refs.paging.complete(res.data.activities.data.map(item => {
						return {
							...item,
							customer: res.data.customers[item.customer_id],
							user: res.data.users[item.user_id],
							decorates: res.data.decorates[item.decorate_id]
						}
					}))
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #f5f5f5;
		padding: 20rpx 0 0 20rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.access {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		margin-right: 20rpx;
		text-align: center;
		margin-top: 20rpx;
	}
</style>